/*
目标：基于 Route 组件，封装一个判断存在 token 才能正常渲染指定 Component 的路由组件。
*/
import React from 'react';
import { Redirect, Route, RouteProps } from 'react-router-dom';
import { hasToken } from '@/utils/storage';

// 使用interface继承内置类型RouteProps， 可能没有自动导入
interface AuthRouteProps extends RouteProps {
  // 改造component的类型为React.FC;React.FC代表函数是
  // 0
  component: React.FC;
  path: string;
  // 使用索引类型，支持任意属性
  [key: string]: any;
}

// 修复类型问题
export type LocationStateType = {
  fromPath: string;
};

// 支持component和path,props传参
// 创建组件
// ReactNode 代表JSX类型，可以是组件或元素，组件是带<组件 />
export default function AuthRoute(props: AuthRouteProps) {
  const { path, component: Component, ...restProps } = props;
  return (
    <Route
      // 💥透传剩余属性
      {...restProps}
      // component和patch接收，放在指定的位置
      path={path}
      // props重名，形参改为_props
      render={(_props: any) => {
        if (hasToken()) {
          return <Component {..._props} />;
        }
        // 1. 改造为第二种写法，重定向组件传参
        return (
          <Redirect
            to={{
              pathname: '/login',
              state: {
                fromPath: path,
              },
            }}
          />
        );
      }}
    />
  );
}
